import {Button, Layout, theme, Dropdown, MenuProps, Avatar, Menu} from "antd";
import {MenuFoldOutlined, MenuUnfoldOutlined, DownOutlined, SmileOutlined, UserOutlined} from "@ant-design/icons";
import SlBreadcrumb from "@/components/SlBreadcrumb";
import React, {FC, useContext} from "react";
import style from "./index.module.scss"
import {StyleContext} from "@/context/style-context.tsx";
import {getUserInfo} from "@/utils/auth.ts";
import {useNavigate} from "react-router-dom";

interface IHeaderProps {
    collapsed: boolean;
    onCollapsed: (collapsed: boolean) => void
}

const {Header} = Layout;
const SlHeader: FC<IHeaderProps> = ({collapsed, onCollapsed}) => {
    const itemClassName = `
    flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
    rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
  `
    const {namespace} = useContext(StyleContext);
    const userInfo: any = getUserInfo();
    const navigate = useNavigate();
    const items: MenuProps['items'] = [
        {
            key: 'logout',
            label: (
                <div className="text-red-500">退出登录</div>
            )
        }
    ];
    const {token: {colorBgContainer}} = theme.useToken();
    const styleList = {
        wrapper: `${namespace}-header`
    }
    const onHandItem: MenuProps['onClick'] = ({key}) => {
        const handles: any =  {
            logout: handleLogout
        }
        handles[key] && handles[key]()
    }
    const handleLogout = () => {
        localStorage.clear();
        window.location.reload();
    }
    return (
        <Header
            className={`flex items-center ${style[styleList.wrapper]}`}
            style={{
                padding: "0 20px 0 0",
                background: colorBgContainer,
                zIndex: 10,
            }}
        >
            <Button
                type="text"
                icon={
                    collapsed ? (
                        <MenuUnfoldOutlined className="toggle-icon"/>
                    ) : (
                        <MenuFoldOutlined className="toggle-icon"/>
                    )
                }
                onClick={() => onCollapsed(!collapsed)}
                style={{
                    width: 64,
                    height: 64,
                }}
            />
            <SlBreadcrumb/>
            <Dropdown menu={{items, onClick: onHandItem}} trigger={['click']} className={`${style[`${styleList.wrapper}-user`]} h-full cursor-pointer`}>
                <div className={`${style[`${styleList.wrapper}-user-info`]} flex items-center`}>
                    <Avatar size={45} icon={<UserOutlined/>}/>
                    <div className={`${style[`${styleList.wrapper}-user-info`]} h-full mx-2 py-2`}>
                        <div className={"flex h-[50%] items-center"}>{userInfo.nickName}</div>
                        <div
                            className={"flex h-[50%] items-center"}>{userInfo.roles ? userInfo.roles[0].roleName : ""}</div>
                    </div>
                    <DownOutlined/>
                </div>
            </Dropdown>
        </Header>
    )
}
export default SlHeader;